<template>
  <scroll-area :bot-margin="50">
    <div class="sub-header q-ma-sm">{{ 'CM' }}</div>
    <q-table
      class="my-table"
      :columns="cols"
      :rows="cmRows"
      :pagination="{ rowsPerPage: 5 }"
      wrap-cells
    >
      <template v-slot:header-cell-mtce_type="props">
        <q-td style="display: none">
          {{ props.col }}
        </q-td>
      </template>
      <template v-slot:body-cell-mtce_type="props">
        <q-td style="display: none">
          {{ props.value }}
        </q-td>
      </template>

      <template v-slot:body-cell-e_form="props">
        <q-td>
          <div>
            <q-btn
              v-if="props.row.has_eform"
              class="e-form-btn cap"
              @click="goEformWebsite(props.row.eform_schema_id)"
            >
              <div class="fac">
                <img :src="eformIcon" />
                <div class="q-ml-sm">E-form</div>
              </div>
            </q-btn>
          </div>
        </q-td>
      </template>

      <template v-slot:body-cell-type="props">
        <q-td>
          <div>
            <q-chip
              :label="props.row.cur_tab ? 'Current Task' : ''"
              square
              v-if="props.row.cur_tab"
            >
            </q-chip>
            <q-chip
              :label="props.row.final_tab ? 'Final Check' : ''"
              square
              v-if="props.row.final_tab"
            >
            </q-chip>
          </div>
        </q-td>
      </template>
    </q-table>

    <div class="sub-header q-ma-sm">{{ 'PM' }}</div>
    <q-table
      class="my-table"
      :columns="cols"
      :rows="pmRows"
      :pagination="{ rowsPerPage: 5 }"
      wrap-cells
    >
      <template v-slot:header-cell-mtce_type="props">
        <q-td style="display: none">
          {{ props.col }}
        </q-td>
      </template>
      <template v-slot:body-cell-mtce_type="props">
        <q-td style="display: none">
          {{ props.value }}
        </q-td>
      </template>

      <template v-slot:body-cell-e_form="props">
        <q-td>
          <div class="row justify-start">
            <div>
              <q-btn
                v-if="props.row.has_eform"
                class="e-form-btn cap"
                @click="goEformWebsite(props.row.eform_schema_id)"
              >
                <div class="fac">
                  <img :src="eformIcon" />
                  <div class="q-ml-sm">E-form</div>
                </div>
              </q-btn>
            </div>
          </div>
        </q-td>
      </template>

      <template v-slot:body-cell-type="props">
        <q-td>
          <div>
            <q-chip
              :label="props.row.cur_tab ? 'Current Task' : ''"
              square
              v-if="props.row.cur_tab"
            >
            </q-chip>
            <q-chip
              :label="props.row.final_tab ? 'Final Check' : ''"
              square
              v-if="props.row.final_tab"
            >
            </q-chip>
          </div>
        </q-td>
      </template>
    </q-table>

    <div class="sub-header q-ma-sm">{{ 'NM' }}</div>
    <q-table
      class="my-table"
      :columns="cols"
      :rows="nmRows"
      :pagination="{ rowsPerPage: 5 }"
      wrap-cells
    >
      <template v-slot:header-cell-mtce_type="props">
        <q-td style="display: none">
          {{ props.col }}
        </q-td>
      </template>
      <template v-slot:body-cell-mtce_type="props">
        <q-td style="display: none">
          {{ props.value }}
        </q-td>
      </template>

      <template v-slot:body-cell-e_form="props">
        <q-td>
          <div class="row justify-start">
            <div>
              <q-btn
                v-if="props.row.has_eform"
                class="e-form-btn cap"
                @click="goEformWebsite(props.row.eform_schema_id)"
              >
                <div class="fac">
                  <img :src="eformIcon" />
                  <div class="q-ml-sm">E-form</div>
                </div>
              </q-btn>
            </div>
          </div>
        </q-td>
      </template>

      <template v-slot:body-cell-type="props">
        <q-td>
          <div>
            <q-chip
              :label="props.row.cur_tab ? 'Current Task' : ''"
              square
              v-if="props.row.cur_tab"
            >
            </q-chip>
            <q-chip
              :label="props.row.final_tab ? 'Final Check' : ''"
              square
              v-if="props.row.final_tab"
            >
            </q-chip>
          </div>
        </q-td>
      </template>
    </q-table>

    <div class="sub-header q-ma-sm">{{ 'IGI' }}</div>
    <q-table
      class="my-table"
      :columns="cols"
      :rows="igiRows"
      :pagination="{ rowsPerPage: 5 }"
      wrap-cells
    >
      <template v-slot:header-cell-mtce_type="props">
        <q-td style="display: none">
          {{ props.col }}
        </q-td>
      </template>
      <template v-slot:body-cell-mtce_type="props">
        <q-td style="display: none">
          {{ props.value }}
        </q-td>
      </template>

      <template v-slot:body-cell-e_form="props">
        <q-td>
          <div class="row justify-start">
            <div>
              <q-btn
                v-if="props.row.has_eform"
                class="e-form-btn cap"
                @click="goEformWebsite(props.row.eform_schema_id)"
              >
                <div class="fac">
                  <img :src="eformIcon" />
                  <div class="q-ml-sm">E-form</div>
                </div>
              </q-btn>
            </div>
          </div>
        </q-td>
      </template>

      <template v-slot:body-cell-type="props">
        <q-td>
          <div>
            <q-chip
              :label="props.row.cur_tab ? 'Current Task' : ''"
              square
              v-if="props.row.cur_tab"
            >
            </q-chip>
            <q-chip
              :label="props.row.final_tab ? 'Final Check' : ''"
              square
              v-if="props.row.final_tab"
            >
            </q-chip>
          </div>
        </q-td>
      </template>
    </q-table>
  </scroll-area>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { getStockItemTasks } from 'src/services/stockItemtasksService';
import { useQuasar } from 'quasar';
import { StockItemTask } from 'src/services/type';
import { resolveDjangoUrl } from 'src/boot/axios';
import eformIcon from 'src/assets/style/Icon.png';
import ScrollArea from '../ScrollArea.vue';

const editedRow = ref();
const editDialogVisible = ref(false);
const deleteDialogVisible = ref(false);

const $q = useQuasar();

const props = defineProps<{
  stock_id?: number;
  stock_code: string;
  isParent: boolean;
}>();

const cmRows = ref();
const pmRows = ref();
const nmRows = ref();
const igiRows = ref();
const createNewTask = ref(false);
const assignTask = ref(false);
const align = 'left';

const cols = [
  /*   {
    name: 'stock_code',
    label: 'Stock Code',
    field: 'stock_code',
    sortable: true,
    align,
  }, */
  {
    name: 'name',
    label: 'Task',
    field: 'name',
    sortable: true,
    align,
  },
  {
    name: 'e_form',
    label: 'E-Form',
    field: 'e_form',
    sortable: true,
    align,
  },
  {
    name: 'type',
    label: 'Type',
    field: 'type',
    sortable: true,
    align,
  },

  {
    name: 'mtce_type',
    label: `M'tce Type`,
    field: 'mtce_type',
    sortable: true,
    align,
  },
];

async function getStockItemTasksData() {
  const res = await getStockItemTasks(props.stock_code);
  if (res.data) {
    cmRows.value = res.data.data.filter((i) => i.mtce_type == 'CM');
    pmRows.value = res.data.data.filter((i) => i.mtce_type == 'PM');
    nmRows.value = res.data.data.filter((i) => i.mtce_type == 'NM');
    igiRows.value = res.data.data.filter((i) => i.mtce_type == 'IGI');
    //childs.value = [...res.data.data].filter(item=>item.stock_item.stock_code!=props.stock_code);
  }
}

function closeDialog() {
  createNewTask.value = false;
  assignTask.value = false;
}

function goEformWebsite(eform_schema_id: number) {
  const url = `${resolveDjangoUrl()}/eforms/eformPreview/${eform_schema_id}`;
  window.open(url);
}

getStockItemTasksData();
</script>
<style scoped>
table {
  border-collapse: collapse;
  table-layout: fixed;
}
table thead tr th {
  border-bottom: 1px solid #d9d9d9;
}

table tbody tr {
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}
/* td {
  padding: 0.5rem;
} */

table thead {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
}
</style>
